<template>
  <div class="home bg">
    <header class="bg">
      <ToolTip />
      <nav>
        <RouterLink to="/weather">
          <div class="title">
            <i class="fa-solid fa-sun"></i>
            <p class="text">新中地天气</p>
          </div>
        </RouterLink>
        <div class="box" v-if="thisWeather !== 404">
          <h4>{{ thisWeather.city }}</h4>
          <span>实时天气：{{ thisWeather.weather }} {{ +thisWeather.temperature_float }}℃</span>
          <span>{{ thisWeather.winddirection }}风{{ thisWeather.windpower }}级</span>
        </div>
        <div class="use">
          <i class="fa-solid fa-circle-info" @click="clickShowTip"></i>
        </div>
      </nav>
    </header>
    <main>
      <div class="search">
        <input type="text" placeholder="请输入城市名称" v-model="cityStr" />
        <ul :style="{ display: cityStr.length ? 'block' : 'none' }">
          <p
            v-if="cityNameResolved"
            style="height: 40px"
            @click="handleWeather(adcode, cityNameResolved)"
          >
            {{ cityNameResolved }}
          </p>
          <p v-else style="height: 10px"></p>
        </ul>
      </div>
      <p class="p1" v-if="cityList.length === 0">
        暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
      </p>
      <div
        v-else
        v-for="(item, index) in cityList"
        :key="index"
        @mouseenter="item.isMoved = true"
        @mouseleave="item.isMoved = false"
        class="citylist"
      >
        <div class="list" :style="{ marginRight: item.isMoved ? '80px' : '0' }">
          <span>{{ item.city }}</span>
          <span>{{ item.tem }}度</span>
        </div>
        <div class="btn-box" :style="{ display: item.isMoved ? 'flex' : 'none' }">
          <button @click="handleWeather(item.adcode, item.city, index)">查看</button>
          <button @click="removeCity(index)">删除</button>
        </div>
      </div>
      <template v-if="fourDayWeather !== 404"
        ><p class="p2">近期天气</p>
        <div class="weather">
          <div class="gap">
            <div class="gap-1" v-for="(item, index) in fourDayWeather" :key="index">
              <span>{{ day(item.week) }}</span>
              <span>{{ item.date.slice(5) }}</span>
              <span>{{ item.dayweather }}</span>
              <span>风力 {{ item.daypower }}级</span>
            </div>
          </div>
          <div class="chart">
            <v-chart :option="thisoption"> </v-chart>
          </div></div
      ></template>
    </main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import ToolTip from '@/components/ToolTip.vue'
import { RouterLink } from 'vue-router'
import { serachWeather, getTodayWeather } from '@/api'
import { useWeatherStore } from '@/stores/weather'
import { storeToRefs } from 'pinia'
import VChart from 'vue-echarts'
const {
  thisWeather,
  fourDayWeather,
  day,
  adcode,
  cityStr,
  cityList,
  cityNameResolved,
  thisoption
} = storeToRefs(useWeatherStore())
const { renderChart, handleWeather, removeCity, clickShowTip } = useWeatherStore()
onMounted(async () => {
  if (localStorage.getItem('cityList')) {
    cityList.value = JSON.parse(localStorage.getItem('cityList'))
  }
  thisWeather.value = await getTodayWeather()
  setInterval(
    async () => {
      thisWeather.value = await getTodayWeather()
    },
    1000 * 60 * 60
  )
  fourDayWeather.value = await serachWeather(thisWeather.value.adcode)
  thisoption.value = renderChart(fourDayWeather.value)
})
</script>

<style lang="scss" scoped>
.bg {
  background-color: rgb(0, 102, 138);
}
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  header {
    position: sticky;
    top: 0;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
      0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
      var(--tw-shadow);
    z-index: 10;
    nav {
      display: flex;
      gap: 1rem;
      align-items: center;
      width: 1536px;
      margin: 0 129.5px 0 129.5px;
      padding: 24px 160px;
      color: #fff;
      .title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        i {
          font-weight: 900;
          font-size: 1.5rem;
          line-height: 2rem;
        }
        .text {
          font-size: 1.5rem;
          line-height: 2rem;
        }
      }
      .box {
        display: flex;
        align-items: center;
        gap: 1rem;
        h4 {
          font-size: 1.125rem;
          line-height: 1.75rem;
          font-weight: inherit;
        }
        span {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }
      .use {
        display: flex;
        justify-content: flex-end;
        flex: 1 1 0%;
        i {
          font-size: 1.25rem;
          line-height: 1.75rem;
          font-weight: 900;
          transition-duration: 1s;
          cursor: pointer;
          &:hover {
            color: rgb(0 78 113);
          }
        }
      }
    }
  }
  main {
    width: 1536px;
    margin: 0 129.5px;
    padding: 0 160px;
    color: #fff;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    .search {
      position: relative;
      padding-top: 16px;
      margin-bottom: 32px;
      ul {
        p {
          height: 40px;
          padding: 8px 4px;
          --tw-bg-opacity: 1;
          background-color: rgb(0 78 113 / var(--tw-bg-opacity));
          cursor: pointer;
        }
      }
      input {
        user-select: none;
        border: none;
        width: 1216px;
        height: 41px;
        padding: 8px 4px;
        background-color: transparent;
        border-bottom: 1px solid #fff;
        margin: 0;
        &:focus {
          outline: none;
          outline: 2px solid transparent;
          outline-offset: 2px;
          --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
          --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
            0 2px 4px -2px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
            var(--tw-shadow);
          border: none;
        }
        &,
        &::placeholder {
          font-size: 16px;
          color: rgb(156, 163, 175);
        }
      }
    }
    .citylist {
      display: flex;
      justify-content: space-between;
      .list {
        flex: 1;
        display: flex;
        height: 40px;
        justify-content: space-between;
        padding: 8px 16px;
        margin-bottom: 16px;
        background-color: rgb(0 78 113);
        transition-duration: 0.3s;
        cursor: pointer;
      }
      .btn-box {
        display: flex;
        button {
          text-align: center;
          background-color: rgb(234 179 8);
          width: 80px;
          height: 40px;
          border: none;
          font-size: 100%;
          font-weight: inherit;
          line-height: inherit;
          color: inherit;
          transition: all 1s;
          cursor: pointer;
        }
        button:last-child {
          margin-left: 10px;
        }
      }
    }

    .p1 {
      text-align: center;
      line-height: 24px;
    }
    .p2 {
      text-align: left;
      margin-top: 24px;
      height: 24px;
    }
    .weather {
      --tw-bg-opacity: 1;
      background-color: rgb(0 78 113 / var(--tw-bg-opacity));
      margin-top: 8px;
      padding: 40px 48px 0 48px;
      .gap {
        display: flex;
        gap: 1.5rem;
        height: 144px;
        .gap-1 {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          flex: 1 1 0%;
          text-align: center;
          span {
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
      .chart {
        margin-top: 40px;
        width: 1120px;
        height: 160px;
      }
    }
  }
}
</style>
